<template>
  <div class="container">
    <div class="sidebar">
      <div class="sidebar-header">
        <h3>后台管理系统</h3>
      </div>
      <div class="sidebar-menu">
        <li @click="refresh('dashboard')">
          <i class="fa fa-tachometer-alt"></i>仪表盘
        </li>
        <li @click="refresh('user-management')">
          <i class="fa fa-users"></i>用户管理
        </li>
        <li @click="refresh('flower-management')">
          <i class="fa fa-leaf"></i>花百科管理
        </li>
        <li @click="refresh('item-management')">
          <i class="fa fa-shopping-cart"></i>商品管理
        </li>
        <li @click="refresh('order-management')">
          <i class="fa fa-file-invoice"></i>订单管理
        </li>
        <li @click="refresh('article-management')">
          <i class="fa fa-newspaper"></i>文章管理
        </li>
        <li @click="refresh('settings')"><i class="fa fa-cog"></i>设置</li>
      </div>
    </div>
    <div v-if="currentComponent" class="currentComponent">
      <component :is="currentComponent" />
    </div>
  </div>
</template>
  
<script>
import flowerKnowledgeManager from "@/components/backend/flowerKnowledge/flowerKnowledgeManager.vue";
import itemManager from "@/components/backend/item/itemManager.vue";
import flowerUserManager from "@/components/backend/flowerUser/flowerUserManager.vue";
import articleManager from "@/components/backend/article/articleManager.vue";
import DashBoard from "@/components/backend/DashBoard/DashBoard.vue";
import orderManager from "@/components/backend/order/orderManager.vue";
export default {
  name: "Sidebar",
  data() {
    return {
      currentComponent: DashBoard, // 当前显示的组件
    };
  },
  components: {
    flowerKnowledgeManager,
    itemManager,
    flowerUserManager,
    articleManager,
    DashBoard,
    orderManager
  },
  methods: {
    refresh(section) {
      this.currentComponent = null;
      this.$nextTick(() => {
        // 在这里添加动态刷新页面的代码，根据所选的板块(section)来加载不同的内容
        switch (section) {
          case "dashboard":
            this.currentComponent = DashBoard;
            break;
          case "flower-management":
            this.currentComponent = flowerKnowledgeManager;
            break;
          case "item-management":
            this.currentComponent = itemManager;
            break;
          case "user-management":
            this.currentComponent = flowerUserManager;
            break;
          case "article-management":
            this.currentComponent = articleManager;
            break;
          case "order-management":
            this.currentComponent = orderManager;
            break;
        }
      });
    }
  },
}
</script>
  
<style scoped>
.sidebar {
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  background-color: #f5f5f5;
  padding: 20px;
  border-right: 1px solid #ccc;
  position: fixed;
}

.sidebar-header {
  text-align: center;
}


.sidebar-menu li {
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
  font-size: larger;
  padding-top: 25px;
  padding-bottom: 25px;
}

.sidebar-menu li:hover {
  background-color: #ddd;
}

.sidebar-menu li i {
  margin-right: 10px;
}

.currentComponent {
  flex-grow: 1;
  margin-left: 250px;
}

.container {
  display: flex;
  flex-direction: row;
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  align-items: center;
}

.test {
  text-align: center;
}
</style>
  